<!-- 时间分析 -->
<template>
    <div class="eCBAnalysis page">
        <div class="leftContent" :class="dir == 'left' ? 'leftArrow' : 'rightArrow'">
            <img src="@/assets/images/data/7.png" class="phLogo" />

            <div class="btnList">
                <div :class="phIndex == 1 ? 'btnItem hover' : 'btnItem'" @click="changePh(1)">
                    <svg
                        t="1747928189180"
                        class="icon"
                        viewBox="0 0 1024 1024"
                        version="1.1"
                        xmlns="http://www.w3.org/2000/svg"
                        p-id="5477"
                        width="20"
                        height="20"
                        xmlns:xlink="http://www.w3.org/1999/xlink"
                    >
                        <path
                            d="M735.268 102.457L250.069 521.042l260.086 82.937-203.108 317.564 519.131-384.429-272.706-80.277"
                            p-id="5478"
                            fill="#666"
                        ></path>
                    </svg>
                    <label>电</label>
                </div>
                <div :class="phIndex == 2 ? 'btnItem hover' : 'btnItem'" @click="changePh(2)">
                    <svg
                        t="1747928286572"
                        class="icon"
                        viewBox="0 0 1024 1024"
                        version="1.1"
                        xmlns="http://www.w3.org/2000/svg"
                        p-id="6682"
                        xmlns:xlink="http://www.w3.org/1999/xlink"
                        width="20"
                        height="20"
                    >
                        <path
                            d="M512 981.333333a384 384 0 0 1-384-384c0-142.250667 120.234667-294.997333 356.906667-489.685333L512 85.333333l27.093333 22.314667C775.765333 302.336 896 455.082667 896 597.333333a384 384 0 0 1-384 384z m-298.666667-384a298.666667 298.666667 0 0 0 597.333334 0c0-104.490667-98.432-231.68-298.666667-401.194666C311.765333 365.696 213.333333 492.842667 213.333333 597.333333z"
                            fill="#666"
                            p-id="6683"
                        ></path>
                    </svg>

                    <label>水</label>
                </div>
                <div :class="phIndex == 3 ? 'btnItem hover' : 'btnItem'" @click="changePh(3)">
                    <svg
                        t="1747928320728"
                        class="icon"
                        viewBox="0 0 1024 1024"
                        version="1.1"
                        xmlns="http://www.w3.org/2000/svg"
                        p-id="7751"
                        xmlns:xlink="http://www.w3.org/1999/xlink"
                        width="20"
                        height="20"
                    >
                        <path
                            d="M912.304593 545.311687c-3.290953-44.903699-11.742439-89.558735-24.488741-129.192408-19.523659-60.776202-48.670489-118.789477-82.055854-163.444513-9.149381-12.1886-26.776853-14.978133-39.467897-6.219655-12.69002 8.702196-15.591093 25.631774-6.497994 37.820374 29.92659 39.996946 56.17337 92.487438 73.996295 147.824767 11.463076 35.701107 19.105127 76.143191 22.090111 117.004831 10.876722 148.856259-52.966329 270.463921-176.413895 339.438852-20.222577-159.511947-149.163251-211.556277-155.104567-213.899648-7.92039-3.067872-16.902972-2.565429-24.3772 1.451048-112.26283 59.799968-144.952346 160.123884-154.434302 216.270649-111.091144-56.06183-178.61605-161.603585-178.61605-283.265482 0-81.945337 42.533722-157.866471 130.030495-232.05617 11.629875-9.873882 23.483854-19.579941 35.337833-29.287023 64.261583-52.603055 130.754996-106.963127 164.251901-189.716876 3.654226-8.925277 6.834662-17.014512 9.511631-24.321942 59.185984 39.940664 187.290617 147.769508 228.876758 354.054735 2.956332 14.7264 17.850553 24.320918 33.108049 21.476127 15.33936-2.817162 25.38004-17.042141 22.397103-31.740912C732.991672 192.401008 526.482341 79.831186 502.998487 67.838038c-0.781806-0.447185-1.616824-0.809435-2.454912-1.226944-14.000875-6.387477-30.735002-0.809435-37.597293 12.522198-1.923816 3.765767-2.843768 7.782244-2.901073 11.770068-2.648316 10.014074-13.665231 40.97318-16.176424 47.472198-28.366048 70.035076-86.631056 117.674073-148.299581 168.129208-12.105712 9.901511-24.180725 19.830651-36.09201 29.899984C160.547021 420.330184 110.397854 512.065492 110.397854 609.100502c0 156.583245 95.472422 290.349831 249.154593 349.033371 3.347235 1.283226 6.888897 1.89721 10.402931 1.89721 5.635347 0 11.212366-1.590218 16.009625-4.742001 7.782244-5.076622 12.412704-13.583366 12.328793-22.593578-0.027629-5.52176 0.418532-131.645273 116.503411-202.044646 30.652114 16.902972 110.786199 73.216535 110.786199 201.042829 0 9.231245 4.880147 17.84953 12.94073 22.814612 8.087189 4.993734 18.240433 5.744841 26.997887 1.896186C833.512063 883.356796 925.77642 729.648019 912.304593 545.311687M471.703737 113.022123c-1.226944-0.837064-2.343371-1.757017-3.319605-2.733251C469.417671 111.292736 470.505445 112.213711 471.703737 113.022123"
                            p-id="7752"
                            fill="#666"
                        ></path>
                    </svg>
                    <label>气</label>
                </div>
                <div :class="phIndex == 4 ? 'btnItem hover' : 'btnItem'" @click="changePh(4)">
                    <svg
                        t="1747928368530"
                        class="icon"
                        viewBox="0 0 1024 1024"
                        version="1.1"
                        xmlns="http://www.w3.org/2000/svg"
                        p-id="8969"
                        xmlns:xlink="http://www.w3.org/1999/xlink"
                        width="20"
                        height="20"
                    >
                        <path
                            d="M512 754.036364c-132.654545 0-242.036364-109.381818-242.036364-242.036364S379.345455 269.963636 512 269.963636 754.036364 379.345455 754.036364 512 644.654545 754.036364 512 754.036364z m0-430.545455c-104.727273 0-188.509091 83.781818-188.509091 188.509091s83.781818 188.509091 188.509091 188.509091 188.509091-83.781818 188.509091-188.509091-83.781818-188.509091-188.509091-188.509091zM512 216.436364c-13.963636 0-27.927273-11.636364-27.927273-27.927273V27.927273c0-16.290909 13.963636-27.927273 27.927273-27.927273s27.927273 11.636364 27.927273 27.927273v160.581818c0 13.963636-13.963636 27.927273-27.927273 27.927273zM512 1024c-13.963636 0-27.927273-11.636364-27.927273-27.927273v-160.581818c0-13.963636 11.636364-27.927273 27.927273-27.927273 13.963636 0 27.927273 11.636364 27.927273 27.927273v160.581818c0 16.290909-13.963636 27.927273-27.927273 27.927273zM188.509091 539.927273H27.927273C11.636364 539.927273 0 525.963636 0 512s11.636364-27.927273 27.927273-27.927273h160.581818c13.963636 0 27.927273 11.636364 27.927273 27.927273 0 13.963636-13.963636 27.927273-27.927273 27.927273zM996.072727 539.927273h-160.581818c-13.963636 0-27.927273-11.636364-27.927273-27.927273 0-13.963636 11.636364-27.927273 27.927273-27.927273h160.581818c13.963636 0 27.927273 11.636364 27.927273 27.927273 0 13.963636-11.636364 27.927273-27.927273 27.927273zM242.036364 269.963636c-6.981818 0-13.963636-2.327273-18.618182-6.981818L116.363636 153.6c-11.636364-9.309091-11.636364-27.927273 0-37.236364 11.636364-11.636364 27.927273-11.636364 37.236364 0l107.054545 107.054546c11.636364 11.636364 11.636364 27.927273 0 37.236363-4.654545 6.981818-11.636364 9.309091-18.618181 9.309091zM134.981818 916.945455c-6.981818 0-13.963636-2.327273-18.618182-6.981819-11.636364-11.636364-11.636364-27.927273 0-37.236363l107.054546-107.054546c11.636364-11.636364 27.927273-11.636364 37.236363 0 11.636364 11.636364 11.636364 27.927273 0 37.236364L153.6 907.636364c-4.654545 6.981818-11.636364 9.309091-18.618182 9.309091zM889.018182 916.945455c-6.981818 0-13.963636-2.327273-18.618182-6.981819l-107.054545-107.054545c-11.636364-11.636364-11.636364-27.927273 0-37.236364 11.636364-11.636364 27.927273-11.636364 37.236363 0l107.054546 107.054546c11.636364 11.636364 11.636364 27.927273 0 37.236363-4.654545 4.654545-11.636364 6.981818-18.618182 6.981819zM781.963636 269.963636c-6.981818 0-13.963636-2.327273-18.618181-6.981818-11.636364-11.636364-11.636364-27.927273 0-37.236363L870.4 116.363636c11.636364-11.636364 27.927273-11.636364 37.236364 0 11.636364 11.636364 11.636364 27.927273 0 37.236364l-107.054546 107.054545c-4.654545 6.981818-11.636364 9.309091-18.618182 9.309091z"
                            p-id="8970"
                            fill="#666"
                        ></path>
                    </svg>
                    <label>热</label>
                </div>
            </div>

            <div class="searchContent">
                <div class="searchItem">
                    <label class="label">区域建筑/部门：</label>
                    <treeSelect
                        :treeProps="props"
                        :options="treeSelectList"
                        v-model="parentId"
                        :clearable="isClearable"
                        :accordion="isAccordion"
                        :expandNode="false"
                        size="small"
                        width="100%"
                        @getValue="getValue($event)"
                    />
                </div>
                <div class="searchItem">
                    <label class="label">建筑类别：</label>
                    <el-select v-model="jzlb" placeholder="请选择" style="width: 200px">
                        <el-option label="公共教学" value="shanghai"></el-option>
                        <el-option label="公共教学2" value="beijing"></el-option>
                    </el-select>
                </div>

                <div class="searchItem">
                    <div class="btnCompList">
                        <div :class="comValue == 1 ? 'btnItem hover' : 'btnItem'" @click="changeComValue(1)">
                            <label>年同比</label>
                        </div>
                        <div :class="comValue == 2 ? 'btnItem hover' : 'btnItem'" @click="changeComValue(2)">
                            <label>月同比</label>
                        </div>
                        <div :class="comValue == 3 ? 'btnItem hover' : 'btnItem'" @click="changeComValue(3)">
                            <label>月环比</label>
                        </div>
                        <div :class="comValue == 4 ? 'btnItem hover' : 'btnItem'" @click="changeComValue(4)">
                            <label>指定年</label>
                        </div>
                        <div :class="comValue == 5 ? 'btnItem hover' : 'btnItem'" @click="changeComValue(5)">
                            <label>指定月</label>
                        </div>
                    </div>
                </div>

                <!-- <div class="searchItem">
                    <label class="span">
                        <el-button-group size="small">
                            <el-button type="default" :class="mode == 'year' ? 'hover' : ''" @click="modeChange('year')">年</el-button>
                            <el-button type="default" :class="mode == 'month' ? 'hover' : ''" @click="modeChange('month')">月</el-button>
                            <el-button type="default" :class="mode == 'day' ? 'hover' : ''" @click="modeChange('day')">日</el-button>
                        </el-button-group></label
                    >
                </div> -->
                <div class="searchItem">
                    <label class="span">
                        <yearsRange :value="yearValue" v-if="mode == 'year'"></yearsRange>
                        <el-date-picker
                            v-else
                            style="width: 250px"
                            v-model="value1"
                            :type="format"
                            range-separator="至"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间"
                        >
                        </el-date-picker>
                    </label>
                </div>
                <!-- <div class="searchItem">
                    <el-select v-model="hy" placeholder="请选择" style="width: 90%;margin-left:5%;">
                        <el-option label="荷园01" value="1"></el-option>
                        <el-option label="荷园02" value="2"></el-option>
                    </el-select>
                </div> -->

                <div class="searchItem">
                    <label class="label">统计单位：</label>
                    <div>
                        <el-button size="small" :type="ylOrJe == 'yl' ? 'primary' : 'default'" @click="ylChange('yl')">用量</el-button>
                        <el-button size="small" :type="ylOrJe == 'je' ? 'primary' : 'default'" @click="ylChange('je')">金额</el-button>
                    </div>
                </div>

                <div class="btns">
                    <el-button size="small" type="primary" @click="submitForm" class="btn1">分析</el-button>
                    <el-button size="small" class="btn2">重置</el-button>
                </div>
            </div>
        </div>
        <div class="rightContent">
            <timeEcharts :type="phIndex"></timeEcharts>
        </div>
        <arrowLeft @arrowChange="arrowChange"></arrowLeft>
    </div>
</template>

<script>
import treeSelect from '@/components/customComponents/customForm/treeSelect.vue'
import {LeftTree} from '@/mockData/monitorCenter.js'
import yearsRange from './components/yearsRange'
import timeEcharts from './components/timeEcharts'
import arrowLeft from '@/components/customComponents/arrowLeft'
export default {
    name: 'eCBAnalysis',
    components: {treeSelect, yearsRange, timeEcharts, arrowLeft},
    data() {
        return {
            dir: 'left',
            comValue: 1,
            yearValue: [],
            ylOrJe: 'yl',
            hy: '1',
            jzlb: '',
            mode: 'year',
            // monthrange daterange
            format: 'years',
            value1: '',
            phIndex: 2,
            props: {
                // 配置项（必选）
                id: 'id',
                label: 'label',
                pid: 'parentId',
                children: 'children'
                // disabled:true
            },
            treeSelectList: LeftTree,
            parentId: '',
            isClearable: true, // 可清空（可选）
            isAccordion: false // 可收起（可选）
        }
    },
    computed: {},
    created() {},
    methods: {
        arrowChange(e) {
            this.dir = e
        },
        ylChange(yl) {
            this.ylOrJe = yl
        },
        getPh(index) {
            var index1 = this.phIndexs.findIndex((b) => b == index)
            return index1 > -1 ? 'btnItem hover' : 'btnItem'
        },
        submitForm() {},
        modeChange(mode) {
            this.mode = mode
            if (mode == 'year') {
                this.format = 'years'
            }
            if (mode == 'month') {
                this.format = 'monthrange'
            }
            if (mode == 'day') {
                this.format = 'daterange'
            }
        },
        changePh(index) {
            this.phIndex = index
        },
        changeComValue(comValue) {
            this.comValue = comValue
            if (comValue == 1 || comValue == 4) {
                this.modeChange('year')
            } else {
                this.modeChange('month')
            }
        },
        // 树形选择器 - 取值
        getValue(value) {
            // this.valueId = value
            console.log('getValue', value, this.valueId)
        }
    }
}
</script>

<style lang="scss" scoped>
.eCBAnalysis {
    width: 100%;
    text-align: left;
    display: flex;
    position: relative;

    .leftArrow {
        width: 300px !important;
    }

    .rightArrow {
        width: 0 !important;
        overflow: hidden;
        padding: 0 !important;
        margin: 0 !important;
    }

    .leftContent,
    .mcTableIndex,
    .leftMain {
        background-color: #fff;
    }

    .leftContent {
        width: 300px;
        text-align: left;
        height: 100%;
        text-align: center;
        border-right: 1px solid #eee;
        padding: 10px;

        .phLogo {
            margin: 30px auto;
            width: 120px;
        }

        .btnList {
            background-color: #fafafa;
            height: 40px;
            text-align: center;

            .hover {
                border-color: #2680fa !important;
            }

            .btnItem {
                display: inline-block;
                height: 26px;
                width: 60px;
                margin-top: 7px;
                margin-left: 10px;
                line-height: 26px;
                text-align: left;
                border: 1px solid #e0e0e0;
                border-radius: 4px;
                cursor: pointer;

                &:hover {
                    border-color: #2680fa;
                }

                &:first-child {
                    margin-left: 0 !important;
                }

                svg {
                    margin-top: 2px;
                    float: left;
                    margin-left: 8px;
                    margin-right: 3px;
                }

                label {
                    font-size: 14px;
                }
            }
        }

        .searchContent {
            margin-top: 20px;

            .btns {
                display: flex;

                .btn1 {
                    width: 58%;
                }

                .btn2 {
                    width: 37%;
                }
            }

            .searchItem {
                .btnCompList {
                    width: 100%;
                    display: flex;

                    .btnItem {
                        width: calc((100% - 8px) / 5);
                        border: 1px solid #e0e0e0;
                        margin-right: 5px;
                        border-radius: 4px;
                        height: 28px;
                        line-height: 28px;
                        text-align: center;
                        font-size: 14px;
                        cursor: pointer;

                        &:hover {
                            border-color: #2680fa;
                        }
                    }

                    .hover {
                        border-color: #2680fa !important;
                    }
                }

                height: 32px;
                line-height: 32px;
                display: flex;
                margin-bottom: 10px;

                .label {
                    width: 120px;
                    text-align: right;
                    font-size: 14px;
                    line-height: 36px;
                }

                .span {
                    text-align: center;
                    margin: 0 auto;

                    .hover {
                        background-color: #eff5fe;
                        color: #6b9ff7;
                        /* border-color: #6B9FF7; */
                    }
                }
            }
        }
    }

    .rightContent {
        flex: 1;
        text-align: left;
        height: 100%;
        padding: 0 10px;
    }
}
</style>
